<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>键盘事件</title>
    <style>
        #box1{
            width: 100px;
            height: 100px;
            background-color: #bfa;
            position: absolute;
            left: 0;
        }
    </style>
    <script>
        window.onload=function () {
//             document.onkeydown=function (event) {
//                 // console.log("按下");
//                 event=window.event;
// //判断y 是否被按下
//                 if(event.keyCode==89){
//                     console.log("y键被按下了");
//                 }
// //判断y键和alt键同时被按下
//                 if(event.keyCode==89&&event.altKey){
//                     console.log("y和alt都被按下了");
//                 }
//练习题 一个小功能 输入框中不显示数字
              var input=document.getElementsByTagName("input")[0];
                input.onkeydown=function (event) {
                    //数字对应的编码是 48-57
                    //在文本框中输入内容 属于onkeydown的默认行为 retrun false如果取消 则不会显示输入的内容
                event=window.event;
                     if (event.keyCode>=48&&event.keyCode<=57){
                        return false;
                    }
                };
//练习题 根据键盘上不同的键 div向不同的方向移动
                var box1=document.getElementById("box1");
                document.onkeydown=function (event) {
                    event=window.event;
                    // console.log(event.keyCode);
                    //向左37 div向左
                    //向上38 div向上
                    //向右39 div向右
                   // 向下40 div向下
                   //  if (event.keyCode==37){
                   //      //div向左移动
                   //      box1.style.left=box1.offsetLeft-10+"px";
                   //  }else if (event.keyCode==38){
                   //      //div向上移动
                   //      box1.style.top=box1.offsetTop-10+"px";
                   //  }else if (event.keyCode==39){
                   //      //div 向右移动
                   //      box1.style.left=box1.offsetLeft+10+"px";
                   //  }else if (event.keyCode==40){
                   //      box1.style.top=box1.offsetTop+10+"px";
                   //  }
                    //定义一个变量 表示移动的速度
                    var speed=10;
                    //如果按下ctrl键 加速为50
                    if (event.ctrlKey){
                        speed=50;
                    }
                    switch (event.keyCode) {
                            case 37:
                                box1.style.left=box1.offsetLeft-speed+"px";
                                break;
                                case 38 :
                                    box1.style.top=box1.offsetTop-speed+"px";
                                    break;
                                    case 39:
                                        box1.style.left=box1.offsetLeft+speed+"px";
                                        break;
                                        case 40:
                                            box1.style.top=box1.offsetTop+speed+"px";
                    }
                }

            }

            // document.onkeyup=function () {
            //     console.log("松开了");
            // };
    </script>
</head>
<body>
<script>
    /*1.键盘事件 onkeydown 按键被按下
                        当onkeydown触发时，第一次和第二次会间隔时间稍长,其他的会非常快 防止误操作
    *           onkeyup 键盘被松开
    *                    不会连续触发
    *       键盘事件一般会绑定一些可以获取焦点的对象(input等)或document
    *  2.通过event.keyCode获取按键的编码 可以判断哪个按键被按下
    *  3.除了event.keyCode还有其他的几个属性
    *       ctrlKey
    *       altKey
    *      shiftKey
    *         这三个是用来判断alt ctrl 和shift是否被按下 如果按下返回true否则返回false
    *   4.在文本框中输入内容 属于onkeydown的默认行为 retrun false如果取消 则不会显示输入的内容
    *
    * */
</script>
<input type="text">
<br/><br />
<div id="box1"></div>
</body>
</html>